<template>
  <div class="app-container">
    <!--单指标风险区划评估地图模块-->
    <Index :dataType="dataType" :form="queryForm" @openQueryDiv="openQueryDiv"></Index>
    <!--查询面板-->
    <div class="new-queryDiv" v-show="openBool" v-loading="loading">
      <el-form ref="ruleForm" :model="form" :rules="rules" label-width="110px">
        <el-form-item label="评估对象" prop="assessType">
          <el-select v-model="form.assessType" placeholder="请选择" style="width: 300px;" @change="typeChange">
            <el-option key="seismicEd" label="抗震能力" value="seismicEd"></el-option>
            <el-option key="personCasualtiesEd" label="人员伤亡" value="personCasualtiesEd"></el-option>
            <el-option key="economicLossesEd" label="经济损失" value="economicLossesEd"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="行政区划" prop="bouas">
          <AreaCascader @getAreaSelect="getAreaSelect" style="width: 300px" />
        </el-form-item>
        <el-form-item label="评估记录编号" prop="assessCode">
          <el-input v-model="form.assessCode" clearable disabled style="width:293px;margin-right:10px;"></el-input>
          <el-button type="primary" @click="openDialog = true">选择评估记录数据</el-button>
        </el-form-item>
        <el-row>
          <el-col :span="9">
            <el-form-item label="烈度" prop="intensity">
              <el-select v-model="form.intensity" placeholder="请选择" style="width: 100%;">
                <el-option v-for="item in dictData.intensity" :key="item.dictItemId" :label="item.dictItemName"
                  :value="item.dictItemCode" />
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="7">
            <el-form-item label="时间段" prop="timeRange" v-if="form.assessType == 'personCasualtiesEd'" label-width="80px">
              <el-select v-model="form.timeRange" placeholder="请选择" style="width: 100%;">
                <el-option v-for="item in dictData.sjd" :key="item.dictItemId" :label="item.dictItemName"
                  :value="item.dictItemCode" />
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="重伤/死亡" prop="casualtyType" v-if="form.assessType == 'personCasualtiesEd'"
              label-width="100px">
              <el-select v-model="form.casualtyType" placeholder="请选择" style="width: 100%;">
                <el-option v-for="item in dictData.rysw" :key="item.dictItemId" :label="item.dictItemName"
                  :value="item.dictItemCode" />
              </el-select>
            </el-form-item>
          </el-col>
        </el-row>
        <hr style="margin-bottom: 20px;">
        <div style="text-align:right;">
          <el-button type="primary" @click="handleQuery">区划</el-button>
        </div>
      </el-form>
    </div>

    <!--选择评估记录-->
    <el-dialog v-model="openDialog" title="选择评估记录" width="1000px" append-to-body @close="openDialog = false">
      <div style="padding:20px;">
        <AssessList v-model:open="openDialog" :url="URL.resistEarthquakesDE" :type="TYPE.confirm"
          @getSelectData="getSelectData"></AssessList>
      </div>
    </el-dialog>
  </div>
</template>

<script setup name="singleRiskZonationConfirmMap">
//地图
import Index from '@/map/buildingRiskZoning/singleRiskZonation/index.vue';
import AssessList from '@/views/buildingRiskZoning/singleRiskZonation/components/assessList.vue'
import AreaCascader from '@/views/buildingRiskZoning/singleRiskZonation/components/areaCascader.vue'
import { URL, TYPE } from '@/views/building/index'
import { getDict } from '@/api/system/dict.js'
import { getSingle } from '@/api/buildingRiskZoning/standardSetting/index'
import { getProvince, getChildArea } from "@/api/system/division"
import { doZoning } from '@/api/buildingRiskZoning/singleRiskZonation/index'

const { proxy } = getCurrentInstance();
//单指标风险区划-确定评估风险区划
const dataType = ref("singleRiskZonationConfirm");//单指标风险区划-确定评估风险区划
const data = reactive({
  queryForm: {},
  form: {
    assessType: "seismicEd",
    bouas: [],//选择的行政区划（省-市-区县）
    assessList: [],//选择的评估记录数组
    intensity: "",
    timeRange: "",
    casualtyType: "",
    assessCode: "",//评估记录编号,
    range: {},//四个临界值设置;新疆、青海和西藏地区四个临界值设置
    qhId: null,//确定评估风险区划主表的id
  },
  rules: {
    assessType: [{ required: true, message: "评估对象不能为空", trigger: "change" }],
    bouas: [{ required: true, message: "行政区划不能为空", trigger: "change" }],
    assessCode: [{ required: true, message: "评估记录编号不能为空", trigger: "change" }],
    intensity: [{ required: true, message: "烈度不能为空", trigger: "change" }],
    timeRange: [{ required: true, message: "时间段不能为空", trigger: "change" }],
    casualtyType: [{ required: true, message: "重伤/死亡不能为空", trigger: "change" }],
    range: [{ required: true, message: "请先设置单指标风险区划设置", trigger: "change" }],
  },
})
const { queryForm, form, rules } = toRefs(data)

const loading = ref(false);
const openBool = ref(true);
const openQueryDiv = (bool) => {
  openBool.value = bool;
}

//获取选择的行政区划列表
const getAreaSelect = (obj) => {
  console.log("getAreaSelect");
  if (obj) {
    console.log("获取选择的行政区划列表");
    console.log(obj);
    form.value.bouas = obj.bouas;
    console.log(form.value);
  }
}

// 字典项
const dictData = ref({
  intensity: [],//烈度
  probability: [],//超越概率
  phcd: [],//破坏程度
  sjd: [],//时间段
  rysw: [],//重伤/死亡
});

// 字典项
const getDictData = (field, code) => {
  getDict(code).then(res => {
    dictData.value[field] = res.data
  })
}

const initOpen = () => {
  getDictData('intensity', 'ld')
  // getDictData('probability', 'sgglsz')
  // getDictData('phcd', 'pgcd')
  getDictData('rysw', 'rysw')
  getDictData('sjd', 'sjd')
}

const form1 = ref({});//抗震能力/极限状态四个临界值设置
const form2 = ref({});//死亡人数四个临界值设置
const form3 = ref({});//直接经济损失/区域内上年度 GDP四个临界值设置

const getData = (type) => {
  getSingle({ type }).then(res => {
    if (res.code == 200) {
      if (type == '1') {
        form1.value = res.data
      } else if (type == '2') {
        form2.value = res.data
      } else {
        form3.value = res.data
      }
    }
  })
}

//选择评估对象--获取单指标风险区划临界值
const typeChange = (assessType) => {
  let range = {};
  if (assessType == "seismicEd") {
    range = form1.value;
  } else if (assessType == "personCasualtiesEd") {
    range = form2.value;
  } else if (assessType == "economicLossesEd") {
    range = form3.value;
  }
  form.value.range = range;
  console.log("range");
  console.log(range);
}

//选择评估记录
const openDialog = ref(false);
const selectData = ref([]);
const getSelectData = (data) => {
  selectData.value = data;
  let str = "";
  if (data) {
    for (let i = 0; i < data.length; i++) {
      if (i > 0) {
        str += ",";
      }
      str += data[i].assessCode;
    }
  }
  form.value.assessList = data;
  form.value.assessCode = str;
  openDialog.value = false;
}

//区划结果查询
const handleQuery = () => {
  queryForm.value = {};//清空
  proxy.$refs["ruleForm"].validate(valid => {
    if (valid) {
      loading.value = true;
      let data = {
        assessType: form.value.assessType,
        bouas: form.value.bouas,
        assessList: form.value.assessList,
        timeRange: form.value.timeRange,
        casualtyType: form.value.casualtyType,
        intensity: form.value.intensity,
        damageDegree: null,
        // damageDegree:form.value.damageDegree,
      }
      //区划计算
      doZoning(data).then(res => {
        console.log(res);
        if (res.code == 200) {
          console.log("区划结果查询")
          console.log(form.value)
          console.log(form1.value)
          console.log(form2.value)
          console.log(form3.value)
          //选择评估对象--获取单指标风险区划临界值
          typeChange(form.value.assessType);
          form.value.qhId = res.data;
          //test
          // form.value.qhId = "test1";
          //区划查询
          queryForm.value = form.value;
          proxy.$modal.msgSuccess('计算成功！')
          loading.value = false;
        }
      })
    }
  });
}

onMounted(() => {
  initOpen();
  getData('1');
  getData('2');
  getData('3');
})
</script>

<style scoped lang="scss">
.new-queryDiv {
  position: absolute;
  top: 20px;
  right: 20px;
  width: 600px;
  background: rgba(255, 255, 255, 0.8);
  border: 1px solid gray;
  padding: 20px;
}
</style>